<template>
  <div class="page ">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">返回</span>
          </a>
        </div>
        <div class="title">我的日程</div>
      </div>
    </div>
    <div class="page-content">

      <div class="block no-padding">
        <div id="schedule-calendar"></div>
        <div class="block program-block no-padding">
          <div class="block-title"><span>2018.01.22(星期一)</span></div>
          <div class="timeline">


          </div>
        </div>
      </div>


    </div>
  </div>


</template>
<style>
  .program-block .item-link {
    width: 100%;
  }

  .program-block .item-subtitle > .time {
    font-size: 13px;
  }

  .program-block .block-title {
    overflow: auto;
    margin-top: 5px;
  }
  .program-block .timeline {
    height: 0;
    overflow: hidden;
    transition: all .2s ease-out;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transform: scaleY(0) translate3d(0,0,0);
    transform: scaleY(0) translate3d(0,0,0);
  }
  .program-block .timeline.active{
    height: auto;
    -webkit-transform: scaleY(1) translate3d(0,0,0);
    transform: scaleY(1) translate3d(0,0,0);
  }

  .program-block .block-title > span {
    float: left;
    padding: 6px 10px;
    background-color: #fff;
    border-radius: 12px;
    font-size: 13px;
  }

  .program-block .item-subtitle > .f7-icons {
    float: right;
    position: relative;
    font-size: 13px;
    line-height: 21px;
    height: 13px;
    margin-right: 50px;
  }

  .program-block .item-subtitle > .f7-icons.ystx {
    color: #ff7f00;
  }

  .program-block .item-subtitle > .f7-icons::after {
    position: absolute;
    content: '';
    width: 60px;
    height: 13px;
    line-height: 21px;
  }

  .program-block .item-subtitle > .f7-icons.wstx::after {
    content: '未设提醒';
  }

  .program-block .item-subtitle > .f7-icons.ystx::after {
    content: '已设提醒';
  }
</style>
<script>
  return {
    // Lifecycle Hooks
    beforeCreate() {
      console.log('componentBeforeCreate', this);
    },
    created() {
      console.log('componentCreated', this);
    },
    beforeMount() {
      console.log('componentBeforeMount', this);
    },
    mounted() {
      console.log('componentMounted', this);
      console.log('组件转载完成，拿全局变量中的用户信息去查询后台', this.$root.user);
      this.createCalendar();
      app.preloader.show();
      setTimeout(function () {
        this.calendarEvents = [new Date('2018/3/11'), new Date('2018/3/14'), new Date('2018/3/15')];
        this.createCalendar();
        app.preloader.hide();
      }.bind(this), 1000);
      this.serchProgramByDay(new Date());
    },
    beforeDestroy() {
      console.log('componentBeforeDestroy', this);
    },
    destroyed() {
      console.log('componentDestroyed', this);
    },
    // Component Data
    data: function () {
      // Must return an object
      return {
        calendarInline: null,
        calendarEvents: [],
        lists:[]
      }
    },
    // Component Methods
    methods: {
      createCalendar: function () {
        $$('#schedule-calendar').html('');
        var monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
        this.calendarInline = app.calendar.create({
          containerEl: '#schedule-calendar',
          value: [new Date()],
          weekHeader: true,
          events: this.calendarEvents,
          renderToolbar: function () {
            return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
              '<div class="toolbar-inner">' +
              '<div class="left">' +
              '<a href="#" class="link icon-only"><i class="icon icon-back ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
              '</div>' +
              '<div class="center"></div>' +
              '<div class="right">' +
              '<a href="#" class="link icon-only"><i class="icon icon-forward ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
              '</div>' +
              '</div>' +
              '</div>';
          },
          on: {
            init: function (c) {
              $$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ', ' + c.currentYear);
              $$('.calendar-custom-toolbar .left .link').on('click', function () {
                this.calendarInline.prevMonth();
              }.bind(this));
              $$('.calendar-custom-toolbar .right .link').on('click', function () {
                this.calendarInline.nextMonth();
              }.bind(this));
            }.bind(this),
            monthYearChangeStart: function (c) {
              $$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ', ' + c.currentYear);
            },
            dayClick: this.calendarDayClick
          }
        });
      },
      calendarDayClick: function (calendar, dayEl, year, month, day) {
        console.log(calendar.value[0]);
        setTimeout(function(){
          this.serchProgramByDay(calendar.value[0]);
        }.bind(this),0)
      },
      serchProgramByDay: function (day) {
        // 更新标题时间
        var clickDay = new Date(day);
        var str = `${clickDay.getFullYear()}.${clickDay.getMonth()+1}.${clickDay.getDate()}(${this.calendarInline.params.dayNames[clickDay.getDay()]})`;
        $$('.program-block .block-title >span').html(str);

        console.log('拿到目标时间，去做后台查询', day);
        app.preloader.show();
        setTimeout(function () {
          app.preloader.hide();
          this.lists = [
            {title:'部门周会',time:'10:00-11:00',isremind:false,id:'10010'},
            {title:'OA系统操作培训会议',time:'12:00-12:30',isremind:true,id:'10020'},
            {title:'会议会议',time:'14:00-15:00',isremind:false,id:'10030'}
          ];
          this.updataProgramView();
        }.bind(this),1200)
      },
      updataProgramView:function () {
        $$('.program-block .timeline').removeClass('active');
        var str = '';
        $$('.program-block .timeline').html(str);
        for(var i = 0 ; i < this.lists.length;i++){
          str += `
          <div class="timeline-item">
              <div class="timeline-item-divider"></div>
              <div class="timeline-item-content card">
                <div class="card-content ">
                  <div class="list media-list">
                    <ul>
                      <li class="item-content">
                        <a href="/schedule-details-component/${this.lists[i].id}/${this.lists[i].title}" class="item-link ">
                          <div class="item-inner">
                            <div class="item-title-row">
                              <div class="item-title">${this.lists[i].title}</div>
                            </div>
                            <div class="item-subtitle"><span class="time">${this.lists[i].time}</span> <i class="f7-icons ${this.lists[i].isremind?'ystx':'wstx'}">alarm</i>
                            </div>
                          </div>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>`;
          $$('.program-block .timeline').html(str);
        };
        setTimeout(function () {
          $$('.program-block .timeline').addClass('active')
        },300)
      }
    },
    // Page Events
    on: {
      pageMounted: function (e, page) {
        console.log('pageMounted', page);
      },
      pageInit: function (e, page) {
        console.log('pageInit', page);
      },
      pageBeforeIn: function (e, page) {
        console.log('pageBeforeIn', page);
      },
      pageAfterIn: function (e, page) {
        console.log('pageAfterIn', page);
      },
      pageBeforeOut: function (e, page) {
        console.log('pageBeforeOut', page);
      },
      pageAfterOut: function (e, page) {
        console.log('pageAfterOut', page);
      },
      pageBeforeRemove: function (e, page) {
        console.log('pageBeforeRemove', page);
      },
    }
  };

</script>
